<template>
  <div id="app">
    <div class="container">
      <!--<div class="top"></div>-->
      <header class="header">
        <div class="close-btn">
          <img
            src="~assets/img/func-10-may-download/close-btn.png"
            alt=""
          />
        </div>
        <!--logo-->
        <div>
          <img
            src="~assets/img/func-10-may-download/logo.png"
            alt=""
            class="logo"
          />
        </div>

        <!--描述-->
        <div class="info">
          <p class="title">打开媛福达APP</p>
          <p class="desc">购物方便优惠多</p>
        </div>

        <!--下载按钮-->
        <!-- @click="download"-->
        <div
          class="button"
          id="wekupButton"
        >
          <p>立即打开</p>
        </div>
      </header>

      <!--手机-->
      <div class="phone">
        <img
          src="~assets/img/func-10-may-download/phone.png"
          alt=""
        />
      </div>

      <!--提示-->
      <!-- <div class="tips" v-if="showTips" @touchmove.prevent>
        <img src="~assets/img/func-download-app/tips.png" alt="" />
      </div> -->
    </div>
  </div>
</template>
<script>
import { getSystem } from '../../js/js'
export default {
  name: 'App',
  data () {
    return {
      system: {},
      showTips: false
    }
  },
  created () {
    this.system = getSystem()
    if (this.system.wechat) this.showTips = true

    if (!this.system.yfd) {
      ULink([{
        id: 'usr1anivh5aa8uq6', // 后台生成的裂变活动LinkID
        data: {
          path: 'webview',
          webUrl: 'https://download.yuanfuda933.com/h5/other.html#/festivale',// 活动地址
          andUrl: 'https://download.yuanfuda933.com/h5/other.html#/festivale'// 活动地址
          // extraData: `{id:${this.id},uid:${this.uid}`,
          // extraData: {
          //   id: this.id,
          //   uid: this.uid,
          //   tid: this.tid
          // }
        }, /* 自定义参数，选填 */
        selector: '#wekupButton',
        useOpenInBrowerTips: 'default',
        proxyOpenDownload: function (defaultAction, LinkInstance) {
          window.location.href = LinkInstance.solution.downloadUrl
        }
      }])
    }
  },
  computed: {},
  mounted () { },
  methods: {
    // download() {
    //   if (this.system.android) window.location.href = this.$app.android_url
    //   if (this.system.iOS) this.$app.href(this.$app.iOS_url)
    // }
  }
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  // width: 375px;
  height: 812px;
  min-height: 689px;
  background: url("~assets/img/func-10-may-download/background.png") no-repeat
    center;
  .top {
    background-color: #fff;
    height: 42px;
  }
  .header {
    padding: 0 14px 0 11px;
    position: relative;
    width: 375px;
    height: 123px;
    background: rgba(0, 0, 0, 0.86);
    // z-index: 2;
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .close-btn {
      width: 13px;
      height: 13px;
      margin-right: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo {
      width: 48px;
      height: 48px;
      margin-right: 11px;
    }

    .info {
      flex: 1;
      .title {
        color: #ffffff;
        font-weight: 400;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-size: 16px;
        line-height: 24px;
      }
      .desc {
        font-size: 12px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #9b9b9b;
        line-height: 18px;
      }
    }

    .button {
      width: 110px;
      height: 34px;
      background: #ea0462;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        font-size: 16px;
      }
    }
  }

  .phone {
    width: 375px;
    padding-top: 20px;
    img {
      display: block;
      width: 279px;
      height: 546px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  // .background {
  //   width: 100%;
  //   height: 100%;
  //   min-height: 689px;
  //   position: absolute;
  //   z-index: 1;
  //   background-color: #fffcef;
  //   img {
  //     width: 100%;
  //     height: 100%;
  //     position: absolute;
  //     left: 0;
  //     bottom: 0;
  //   }
  // }

  .tips {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: flex-end;
    img {
      width: 291.9px;
      height: 153.3px;
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}
</style>
